<template>
	<div class="personnelAdd">
		<div class="header_ContentBox pl_10 pr_10">
			<i class="lhadmin lhadmin-renzheng Icon"></i>
			<span class="pl_10 pr_10">/</span>
			<span class="header_text">B端-商户 / 商户管理 / 账号管理 / 新增账号</span>
		</div>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div>
				<h4 class="border-bottom pb_10">基本信息</h4>
			</div>
			<div class="pt_10">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>手机号码</div>
					<div class="fl list-cont">
						<el-input v-model="dataMes.mobile"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>姓名</div>
					<div class="fl list-cont">
						<el-input v-model="dataMes.name"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>所属商户</div>
					<div class="fl list-cont">
						<el-select v-model="dataMes.business_id">
							<el-option
								v-for="(item, index) in merchantsList"
								:key="index"
								:label="item.name"
								:value="item.id"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>所属店铺</div>
					<div class="fl list-cont">
						<el-select placeholder="请选择活动区域" multiple v-model="selects">
							<el-option v-for="(item, index) in shopList" :label="item.label" :value="item.id" :key="index">{{
								item.name
							}}</el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">Email</div>
					<div class="fl list-cont">
						<el-input v-model="dataMes.email"></el-input>
					</div>
				</div>
			</div>
			<div class="ml_110 mt_80">
				<span class="resetBtn mr_10" @click="back">返回</span>
				<span class="btnOK" @click="submitBtn">保存</span>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
export default {
	name: 'MerchantsEdit',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			cityList: [], //城市列表
			//相关数据
			dataMes: {
				mobile: '',
				name: '',
				business_id: '',
				email: ''
			},
			city_arr: '',
			city_id: '',
			city_name: '',
			city_sn: '',
			merchantsList: [], //商务负责人列表
			shopList: [], //店铺列表
			selects: []
		}
	},
	mounted() {
		this.getMerchants()
		this.getcityList()
		//店铺列表
		// let fn = new FormData();
		// this.$http.post(this.url + '/shop/list', fn).then((res) => {
		// 	console.log(res.data.data);
		// 	if (res.data.msg == '查询成功' || res.data.code == '200') {
		// 		if(res.data.data!=null){
		// 			res.data.data.list.forEach(item => {
		// 				item.value = item.name;
		// 			});
		// 			this.shopList = res.data.data.list;
		// 			this.total = res.data.data.count;
		// 		}else{
		// 			this.shopList = [];
		// 			this.total = 0;
		// 		}

		// 	} else if (res.data.code == '8886') { //code   8886  登录过期
		// 		sessionStorage.clear();
		// 		this.$alert('登录已过期，请重新登录 !', '提示', {
		// 			confirmButtonText: '确定',
		// 			callback: action => {
		// 				window.location = 'login.html';
		// 			}
		// 		});
		// 		return;
		// 	} else {
		// 		this.$message.error(res.data.msg);
		// 		return;
		// 	}
		// }, (res) => {
		// 	this.$message.error('网络错误！');
		// 	return;
		// })
		let fn = new FormData()
		fn.append('sign_status', 30) //已合作的店铺
		fn.append('status', 1) //启用的店铺
		// fn.append("search_list", 1); //不进行分页
		this.$http.post(this.url + '/shop/getListForSearch', fn).then(
			res => {
				// console.log(res.data.data);
				if (res.data.msg == '查询成功' || res.data.code == '200') {
					if (res.data.data != null) {
						res.data.data.list.forEach(item => {
							item.value = item.name
						})
						this.shopList = res.data.data.list
						this.total = res.data.data.count
					} else {
						this.shopList = []
						this.total = 0
					}
				} else if (res.data.code == '8886') {
					//code   8886  登录过期
					sessionStorage.clear()
					this.$alert('登录已过期，请重新登录 !', '提示', {
						confirmButtonText: '确定',
						callback: action => {
							window.location = 'login.html'
						}
					})
					return
				} else {
					this.$message.error(res.data.msg)
					return
				}
			},
			res => {
				this.$message.error('网络错误！')
				return
			}
		)
	},
	methods: {
		//获取商户列表
		getMerchants() {
			let fn = new FormData()
			this.$http.post(this.url + '/business/list', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						if (res.data.data.list != null) {
							this.merchantsList = res.data.data.list
						} else {
							this.merchantsList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		submitBtn() {
			// 新增接口
			if (
				this.dataMes.mobile == '' ||
				this.dataMes.name == '' ||
				this.dataMes.business_id == '' ||
				this.selects.length == 0
			) {
				this.$message.error('请填写必填项')
				return
			}
			let fn = new FormData()
			// selects
			fn.append('business_id', this.dataMes.business_id)
			fn.append('shops', this.selects.toString())
			fn.append('mobile', this.dataMes.mobile)
			fn.append('name', this.dataMes.name)
			fn.append('email', this.dataMes.email)
			this.$http.post(this.url + '/shopUser/add', fn).then(
				res => {
					// console.log(res);
					if (res.data.msg == '请求成功' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.back()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		getcityList() {
			//获取城市列表
			let fn = new FormData()
			this.$http.post(this.url + '/city/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.cityList = res.data.data.list
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		changeBtndialog() {
			let [id, name, code] = this.city_arr.split('|') // es6 数组解构赋值
			this.city_id = id.toString()
			this.city_name = name.toString()
			this.city_sn = code.toString()
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			console.log(item)
			this.dataMes.shop_id = item.id
		}
	},
	filters: {}
}
</script>

<style scoped>
.personnelAdd {
	margin: 15px 15px 0 15px;
}
.row-info {
	padding: 10px 0;
}
.resetBtn,
.btnOK {
	padding: 0 30px;
}
.title-key {
	width: 100px;
}
.list-cont img {
	width: 128px;
}
</style>



// WEBPACK FOOTER //
// src/components/demand/Add.vue